<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送请求页面</title>
    <!-- import CSS -->
    <!--<link rel="stylesheet" href="../static/css/eui.css" type="text/css">-->
    <link rel="stylesheet" href="../css/eui.css">
</head>
<body>
<div id="app">
    <p align="right">欢迎您,${username},点击<a @click="zhuxiao"style="color: red">"这里注销"。</a></p>
    <el-card style="width: 600px;height: 400px;
    margin: 0 auto;background-color: rgba(255,255,255,0.3)">
        <el-form style="width: 400px;margin: 30px auto" label-width="110px" >
            <el-form-item label="请求地址">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                    {{postData.url}}
                  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item style="width:300px" v-for="data in url"
                                           :disabled="data.enable==0"
                                          :command="data.address">
                            {{data.address}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item label="请求类型">
                <div>
                    <el-radio v-model="radio" :label="data.id" v-for="data in type">
                        {{data.type}}</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="参数信息" v-if="radio==1">
                <el-input type="text" v-model="getData.username" placeholder="用户名"></el-input>
                <el-input type="text" v-model="getData.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="请求参数" v-if="radio==2">
                <el-input type="textarea" v-model="postData.req" placeholder="Json格式对象"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button style="position: relative;right: 35px" type="primary" @click="charu()">
                    访问
                </el-button>
                <el-button style="position: relative;right: 35px" type="primary" @click="chaxun()">
                    日志查询
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <input type="text" id="username" value="${username}" hidden>
    <input type="text" id="id" value="${id}" hidden>
</div>
</body>
<!-- import Vue before Element -->
<!--<script src="js/vue.js"></script>-->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<!--<script src="js/eui.js"></script>-->
<script src="../js/eui.js"></script>
<!--<script src="js/axios.min.js"></script>-->
<script src="../js/axios.min.js"></script>

<script>
    let username = document.getElementById("username").value;
    let id = document.getElementById("id").value;
    axios.defaults.withCredentials = true;
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                getData:{
                    username:"",
                    password:""
                },
                postData: {
                    url: "请选择请求地址 ↓",
                    req: ""
                },
                radio:"",
                url:[],
                type:[],
                /*isLogin:1*/
            }
        },
        created:function(){
            /*//查询用户是否登录
            axios.get("/demo/request/isLogin?id="+id).then(function (response) {
                if(response.data===0){
                    alert("用户未登录,请先登录!")
                    location.href="/demo/request/login";
                }else{
                    isLogin=1;
                }
            })*/
            //发出请求向数据库查询所有url
            axios.get("/demo/request/cxurl").then(function (response) {
                v.url=response.data.data;
            })
            //发出请求向数据库查询请求类型
            axios.get("/demo/request/cxtype").then(function (response) {
                v.type=response.data.data;
            })
        },
        methods:{
            charu(){
                /*if(v.isLogin!=1){
                    alert("用户未登录,请先登录!")
                    location.href="/demo/request/login";
                    return;
                }*/
                if(v.postData.url=="请选择请求地址 ↓"){
                    alert("请选择请求地址!");
                    return;
                }
                if(v.radio!=1&&v.radio!=2){
                    alert("请选择请求类型!")
                    return;
                }
                if(v.radio==1){
                    if(v.getData.username==""||v.getData.password==""){
                        alert("用户名或密码不能为空!")
                        return;
                    }
                    axios.get(v.postData.url+"get?username="+v.getData.username+"&password="+
                        v.getData.password).then(function (response) {
                        let data = response.data;
                        if(data.state===200) {
                            alert("添加用户成功!");
                        }else if(data.state===406){
                            alert("用户名或密码为空!");
                        }else if(data.state===409){
                            alert("用户名已存在!");
                        } else{
                            alert(data.state);
                        }
                    })
                }
                if(v.radio==2){
                    if(v.postData.req==""){
                        alert("请求参数不能为空!");
                        return;
                    }
                    axios.post(v.postData.url+"post",v.postData).then(function (response) {
                        /*let req = JSON.parse(v.postData.req);
                        v.postData.id = req.id;*/
                        console.log(response);
                        let data = response.data;
                        if(data.state===200) {
                            alert("添加用户成功!");
                        }else if(data.state===409){
                            alert("用户名已存在!");
                        }else {
                            alert("添加用户失败");
                        }
                    })
                }
            },
            handleCommand(command) {
                v.postData.url=command;
            },
            chaxun(){
                /*location.href="/demo/request/cxqq";*/
                axios.get("/demo/request/cxqq").then(function (response) {
                    let data=response.data;
                    if(data.state===200){
                        location.href="/demo/request/rzym"
                    }
                    if(data.state===500){
                        alert("无此权限!")
                        location.reload();
                    }
                })
            },
            zhuxiao(){
                axios.get("/demo/request/logout").then(function (response) {
                    if(response.data===0){
                        alert("登出用户成功!请先登录!");
                        /*isLogin=0;*/
                        location.href="/demo/request/login";
                    }
                })
            }
        }
    })
</script>
<style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>

</html>